<?php
/**
 * 模板测试脚本
 * 用于验证组件HTML模板与JSON数据的动态绑定
 */

// 设置错误报告
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 定义模板和数据目录路径
define('VIEWS_DIR', __DIR__ . '/views/components/');
define('DATAS_DIR', __DIR__ . '/datas/components/');

/**
 * 渲染组件模板
 * @param string $componentType 组件类型
 * @return string 渲染后的HTML内容
 */
function render_component($componentType) {
    // 构建文件路径
    $htmlFile = VIEWS_DIR . $componentType . '.html';
    $jsonFile = DATAS_DIR . $componentType . '.json';
    
    // 检查文件是否存在
    if (!file_exists($htmlFile) || !file_exists($jsonFile)) {
        return "<div class='error'>错误: 组件'{$componentType}'的HTML模板或JSON数据文件不存在</div>";
    }
    
    // 读取JSON数据
    $jsonContent = file_get_contents($jsonFile);
    $data = json_decode($jsonContent, true);
    
    if (json_last_error() !== JSON_ERROR_NONE) {
        return "<div class='error'>错误: 组件'{$componentType}'的JSON数据格式无效</div>";
    }
    
    // 读取HTML模板
    $template = file_get_contents($htmlFile);
    
    // 创建一个临时变量来存储解析后的模板
    $parsedTemplate = '';
    
    // 使用输出缓冲来捕获PHP解析后的内容
    ob_start();
    
    // 定义数据变量，以便模板可以访问
    $$componentType = $data;
    
    // 评估模板内容
    eval('?>' . $template . '<?php');
    
    // 获取缓冲区内容并清除缓冲区
    $parsedTemplate = ob_get_clean();
    
    return $parsedTemplate;
}

/**
 * 创建测试页面
 * @param array $components 要测试的组件列表
 */
function create_test_page($components) {
    $html = '<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板动态数据测试</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #93c5fd;
            --primary-dark: #2563eb;
            --secondary: #6366f1;
            --accent: #8b5cf6;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
        }
        
        .bg-primary {
            background-color: var(--primary);
        }
        
        .text-primary {
            color: var(--primary);
        }
        
        .bg-light {
            background-color: var(--light);
        }
        
        .text-dark {
            color: var(--dark);
        }
        
        .bg-dark {
            background-color: var(--dark);
        }
        
        .text-gray-400 {
            color: rgba(100, 116, 139, 0.7);
        }
        
        .text-gray-500 {
            color: rgba(100, 116, 139, 0.5);
        }
        
        .transition-custom {
            transition: all 0.3s ease;
        }
        
        .error {
            padding: 1rem;
            background-color: #fee2e2;
            color: #dc2626;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .component-section {
            margin-bottom: 3rem;
            padding: 2rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            background-color: white;
        }
        
        .component-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--primary);
        }
        
        .component-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--dark);
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .header h1 {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--dark);
            margin-bottom: 1rem;
        }
        
        .header p {
            color: var(--gray);
            font-size: 1.125rem;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="test-container">
        <div class="header">
            <h1>模板动态数据测试</h1>
            <p>验证组件HTML模板与JSON数据的动态绑定效果</p>
        </div>';
    
    // 渲染每个组件
    foreach ($components as $component) {
        $html .= '        <div class="component-section">
            <div class="component-header">
                <h2 class="component-title">' . ucfirst($component) . ' 组件</h2>
                <button class="btn btn-primary" onclick="toggleCode(this)">查看源码</button>
            </div>
            <div class="component-content">
                ' . render_component($component) . '
            </div>
            <div class="component-code hidden mt-4 p-4 bg-gray-900 text-gray-100 rounded-md overflow-x-auto">
                <pre><code>' . htmlspecialchars(file_get_contents(DATAS_DIR . $component . '.json')) . '</code></pre>
            </div>
        </div>';
    }
    
    $html .= '    </div>
    
    <script>
        // 切换代码显示/隐藏
        function toggleCode(button) {
            const codeSection = button.parentElement.nextElementSibling.nextElementSibling;
            codeSection.classList.toggle("hidden");
            button.textContent = codeSection.classList.contains("hidden") ? "查看源码" : "隐藏源码";
        }
        
        // 返回顶部按钮逻辑
        const backToTopButton = document.getElementById("back-to-top");
        if (backToTopButton) {
            window.addEventListener("scroll", () => {
                if (window.scrollY > 300) {
                    backToTopButton.classList.remove("opacity-0", "invisible");
                    backToTopButton.classList.add("opacity-100", "visible");
                } else {
                    backToTopButton.classList.remove("opacity-100", "visible");
                    backToTopButton.classList.add("opacity-0", "invisible");
                }
            });
            
            backToTopButton.addEventListener("click", () => {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });
            });
        }
    </script>
</body>
</html>';
    
    return $html;
}

// 测试指定的组件
$testComponents = ['about', 'navbar', 'hero', 'services', 'faq', 'login', 'footer'];

// 生成并输出测试页面
$testPage = create_test_page($testComponents);
echo $testPage;